<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/header.jsp" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>视频展示</title> 
<link rel="stylesheet" href="${ctx}/assets/css/pagination.css" /> 
<script src="${ctx}/assets/js/pagination/jquery.pagination.js"></script>
<style>
	.video{
		float:left; 
		width:200px;height:150px;
		border:solid 1px #FF9900;
		margin: 10px;
		background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
		position:relative;
	} 
	#box{
		border:solid 1px green;
		margin-right: 12px;
		margin-left:12px;
		display:inline-block; 
	}
	.playBtn{
		width:100%;
		height:100%; 
		position:absolute;
		float:left;
		background-position:center center;
		background-repeat:no-repeat; background-size:40%;-moz-background-size:40%;
	
		background-image:url("${ctx}/assets/img/play.png")  ; 
		opacity:0;
    	filter: alpha(opacity=0);
		 
	} 
	.playBtn:hover{
		box-shadow: 10px 10px 3px #888888; 
		opacity:1;
    	filter: alpha(opacity=1);
		-webkit-transition: all .2s ease-in;
        -moz-transition: all .2s ease-in;
        transition: all .2s ease-in;
		  
	}
	
	.ui-dialog .ui-dialog-content{
	overflow-y:hidden;
	}
	.info{
		width:100%;
		position:absolute;
		bottom:0px;
		
	}
	.info li{
		color:#fff;
		list-style:none;
		text-shadow:1px 1px 5px #000;
		background-color: #3333336e;
		font-family:"Microsoft YaHei";
	}
	
	   
</style>

</head>
<body>
	<div class="row"> 
	<div class="col-xs-12">	
			<form class="form-horizontal" id="queryUserForm"  >
						<fieldset>
						    <div class="row">
								<div class="form-group col-xs-6">
									<label class="col-sm-4 control-label no-padding-left" for="custNameQuery">客户姓名</label>
									<div class="col-sm-8">
										<input type="text" id="custNameQuery" name="custName" class="col-xs-10"/>
									</div>
								</div>							
						    	<div class="form-group col-xs-6">
									<label class="col-sm-4 control-label no-padding-left" for="idCardQuery">证件号码</label>
									<div class="col-sm-8">
										<input type="text" id="idCardQuery" name="idCard" class="col-xs-10"  />
									</div>
								</div>
								<div class="form-group col-xs-6">
									<label class="col-sm-4 control-label no-padding-left" for="loanContract">贷款合同号</label>
									<div class="col-sm-8">
										<input type="text" id="loanContract" name="bean.loanContract" class="col-xs-10"  />
									</div>
								</div>
								<div class="form-group col-xs-6">
									<label class="col-sm-4 control-label no-padding-left" for="orgId">所属机构</label>
									<div class="col-sm-8">
										<input type="text" id="orgId" name="orgId" class="col-xs-10 input-pk" value="${demo.demoid}"/>	
									</div>
								</div>	
								<input type="hidden" id="iDisplayStart" name="iDisplayStart" value="0">
								<input type="hidden" id="iDisplayLength" name="iDisplayLength" value="12">
															
							</div>
						</fieldset>
						<div class="form-actions center" style="margin-top: 5px;margin-bottom: 5px">
							<button class="btn btn-sm btn-info" type="button"  onclick="search()">
								<i class="icon-on-right ace-icon fa fa-search bigger-110"></i>
								查询
							</button>
							&nbsp; &nbsp; &nbsp;
							<button class="btn btn-sm btn-warning" type="reset">
								<i class="ace-icon fa fa-refresh bigger-110"></i>
								重置
							</button>
							
						</div>		
					</form>
	</div>	
	


	<div id="box"></div>
	<div class="m-style M-box" style="margin-left: 10px"></div>
	
	
	<div id="dlg"  > 
		<iframe id="video_frame" width="100%" height="100%" ></iframe>
	</div>
    
</body>



</html>

<script>
$(function(){
	
	 
	$("#orgId").orgTreeSelect({
		checkType:"org", 
		clickType:"org",
		defaultOrgId:"${fns:getOrgId()}",
		defaultOrgName:'<hw:orgName orgId="${fns:getOrgId()}" />',
		queryRootOrgId:"${fns:getOrgId()}"
	});
	
	
	
});




function show(list){ 
	$(".video").remove();
	if(list.length==0){
		 $("#box").append("未查询到内容");
	}
	 for(var i=0;i<list.length;i++){
		 var row=list[i];  
		 var div=$("<div class='video' ></div>");
		 div.css("background-image","url(${ctx}/videoShow/getFile?path="+row.pathThumbnail+"&time="+new Date().getTime()+") ")
		 
		 var info=$("<div class='info'></div>");
		 info.append("<li>客户姓名："+row.custName+"</li>");
		 //info.append("<li>证件类型："+row.idType+"</li>");
		 info.append("<li>证件号码："+row.idCard+"</li>");
		 info.append("<li>合同编号："+row.loanContract+"</li>");
		 div.append(info);
		 div.append("<div class='playBtn' onClick=\"play('"+row.pathVideo+"')\"></div>"); 
		 $("#box").append(div);
	 }
	
}
 
function play(path){
 	$("#video_frame").attr("src","${ctx}/videoShow/toPlay.do?path="+path+"&time="+new Date().getTime());
 	$("#dlg").dialog("open");  
 
}


$('#dlg').dialog({
	hide : true,
	autoOpen : false,
	width : 700,
	height : 600,
	modal : true, 
	open: function (event,ui) {
		 
    },
    close: function(event, ui) {
    	$("#video_frame").attr("src","about:blank");
    }
});

function search(){

	var url='${ctx}/videoShow/list';
	$.getJSON(url, $("#queryUserForm").serialize(),
	 function(e){ 
		show(e.data);
		$('.M-box').pagination({
		   	pageCount: Math.ceil(e.pageCount / $("#iDisplayLength").val()),
		    jump: true,
		    coping: true, 
		    prevContent: '上页',
		    nextContent: '下页',
		    callback: function (api) {
		    	$("#iDisplayStart").val((api.getCurrent()-1)*$("#iDisplayLength").val());
		        $.getJSON(url,  $("#queryUserForm").serialize(), function (json) {
				    api.setPageCount(Math.ceil(e.pageCount / $("#iDisplayLength").val()))
		            show(json.data);
		        });
		    	    
		    }
		});	
		 
	});
}
</script>